<template>
  <div>
    <canvas ref="myCanvas"></canvas>
    <!-- <button @click="generateCanvas">生成并上传图片</button> -->
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import bj from "./img/bj.png";
import zz from "./img/zz.png";
// 创建响应式的 ref 变量
const myCanvas = ref(null);

// 模拟从接口获取数据
const fetchData = () => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({
        accountBalance: '1000元',
        distributorName: '分销商ABC',
        phoneNumber: '123456789',
        name: '张三',
        bankName: '中国银行',
        bankCardNumber: '622202*********',
        registrationDate: '2022-01-01',
      });
    }, 1000);
  });
};

// 生成 Canvas 并绘制数据
const generateCanvas = async () => {
  const canvas = myCanvas.value;
  const ctx = canvas.getContext('2d');

  // 设置 canvas 尺寸
  canvas.width = 410;
  canvas.height = 489;

  // 1. 创建一个新的 Image 对象
  const image = new Image();

  // 确保图片路径是正确的
  image.src =bj; // 确认路径正确

  // 等待图片加载完成
  image.onload = async () => {
    // 图片加载完成后才绘制
    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);

    // 再次绘制文字，确保文字显示在背景图片上

    // 2. 添加一块白色背景 (宽 366px, 高 397px)
    const whiteBgX = (canvas.width - 366) / 2; // 水平居中绘制白色背景
    const whiteBgY = 77; // 距离顶部 150px
    const whiteBgWidth = 366;
    const whiteBgHeight = 397;

    const borderRadius = 10; // 圆角半径

    // 手动绘制圆角矩形
    ctx.fillStyle = '#FFFFFF'; // 设置填充颜色为白色
    ctx.beginPath();
    ctx.moveTo(whiteBgX + borderRadius, whiteBgY); // 左上角的起点
    ctx.lineTo(whiteBgX + whiteBgWidth - borderRadius, whiteBgY); // 上边直线
    ctx.arcTo(
      whiteBgX + whiteBgWidth,
      whiteBgY,
      whiteBgX + whiteBgWidth,
      whiteBgY + borderRadius,
      borderRadius
    ); // 右上角的弧线
    ctx.lineTo(
      whiteBgX + whiteBgWidth,
      whiteBgY + whiteBgHeight - borderRadius
    ); // 右边直线
    ctx.arcTo(
      whiteBgX + whiteBgWidth,
      whiteBgY + whiteBgHeight,
      whiteBgX + whiteBgWidth - borderRadius,
      whiteBgY + whiteBgHeight,
      borderRadius
    ); // 右下角的弧线
    ctx.lineTo(whiteBgX + borderRadius, whiteBgY + whiteBgHeight); // 下边直线
    ctx.arcTo(
      whiteBgX,
      whiteBgY + whiteBgHeight,
      whiteBgX,
      whiteBgY + whiteBgHeight - borderRadius,
      borderRadius
    ); // 左下角的弧线
    ctx.lineTo(whiteBgX, whiteBgY + borderRadius); // 左边直线
    ctx.arcTo(
      whiteBgX,
      whiteBgY,
      whiteBgX + borderRadius,
      whiteBgY,
      borderRadius
    ); // 左上角的弧线
    ctx.closePath();
    ctx.fill(); // 填充圆角矩形

    // 在矩形内绘制横线
    ctx.strokeStyle = '#F1F1F1 '; // 设置线条颜色
    ctx.lineWidth = 1; // 设置线条宽度
    ctx.beginPath();
    const lineY = 194; // 计算横线的Y坐标，设置在矩形中间
    ctx.moveTo(whiteBgX, lineY); // 横线的起点
    ctx.lineTo(whiteBgX + whiteBgWidth, lineY); // 横线的终点
    ctx.stroke(); // 绘制横线

    // 2. 获取数据并绘制文本
    const data = await fetchData();

    const tstList = [
      {
        text: '',
        labels: [
          '账号余额:',
          '分销商昵称:',
          '手机号:',
          '姓名:',
          '开户行:',
          '银行卡号:',
          '注册时间:',
        ],
        color: '#999',
        font: 'bold 14px Arial',
        x: 37,
        y: 230,
      },
      {
        text: '',
        labels: [
          data.accountBalance,
          data.distributorName,
          data.phoneNumber,
          data.name,
          data.bankName,
          data.bankCardNumber,
          data.registrationDate,
        ],
        color: '#333',
        font: 'bold 14px Arial',
        x: 172,
        y: 230,
      },
      {
        text: '提现凭证',
        labels: [],
        color: '#fff',
        font: 'bold 30px Arial',
        x: 144,
        y: 40,
      },
      {
        text: '￥',
        labels: [],
        color: '#333',
        font: 'bold 18px Arial',
        x: 115,
        y: 130,
      },
      {
        text: '100.00',
        labels: [],
        color: '#333',
        font: 'bold 48px Arial',
        x: 133,
        y: 130,
      },
      {
        text: '提现金额',
        labels: [],
        color: '#999',
        font: 'bold 14px Arial',
        x: 177,
        y: 170,
      },
    ];

    tstList.forEach(item => {
      if (item.labels.length !== 0) {
        item.labels.map((iv, idx) => {
          ctx.fillStyle = item.color; // 左侧字体颜色：黑色
          ctx.font = item.font;
          const x = item.x; // X 坐标
          const y = item.y + idx * 35;
          ctx.fillText(iv, x, y);
        });
      } else {
        ctx.fillStyle = item.color; // 左侧字体颜色：黑色
        ctx.font = item.font;
        ctx.fillText(item.text, item.x, item.y);
      }
    });

    const dataURL = canvas.toDataURL('image/png'); // 将 canvas 转换为 PNG 格式
    // const link = document.createElement('a');
    // link.href = dataURL; // 设置下载链接
    // link.download = 'canvas_image.png'; // 指定下载文件名
    // link.click(); // 模拟点击下载
    // uploadImage(imgURL);
  };

  // 4. 创建章子图片对象
  const stampImage = new Image();
  stampImage.src = zz; // 替换为章子的路径
  console.log("stampImage",stampImage.src);

  // 等章子图片加载完成后，绘制在合适位置
  stampImage.onload = () => {
    const stampX = canvas.width - 145; // 章子的 X 坐标，调整以适应需求
    const stampY = 65; // 章子的 Y 坐标，调整以适应需求
    const stampWidth = 136; // 章子的宽度
    const stampHeight = 120; // 章子的高度

    // 在 canvas 上绘制章子
    ctx.drawImage(stampImage, stampX, stampY, stampWidth, stampHeight);

    // 5. 将 canvas 转为图片并上传

    //   uploadImage(imgURL);
  };

  // 处理章子加载失败
  stampImage.onerror = () => {
    console.error('章子图片加载失败，请检查路径或图片资源是否存在');
  };

  // 如果图片加载失败，打印错误信息
  image.onerror = () => {
    console.error('图片加载失败，请检查路径或图片资源是否存在');
  };
};

// 上传图片的函数
const uploadImage = imgURL => {
  // 将 base64 图片上传到服务器（需要根据你的后端API修改）
  fetch('你的上传接口地址', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      image: imgURL, // 将图片数据作为参数上传
    }),
  })
    .then(response => response.json())
    .then(data => {
      console.log('上传成功:', data);
    })
    .catch(error => {
      console.error('上传失败:', error);
    });
};

onMounted(() => {
  generateCanvas();
});
</script>

<style scoped>
button {
  margin-top: 20px;
}
</style>
